<template>
  <div class="leftTwo">
    <div>
      <moduleTitle :name="title"></moduleTitle>
    </div>
    <div class="two">
      <div
        id="carousel"
        class="carousel"
        @mouseenter="pauseRotation"
        @mouseleave="startRotation"
      >
        <!-- 添加了鼠标悬停事件 -->
        <div
          v-for="(item, index) in orderedItems"
          :key="item.id"
          :class="['box', { large: index === 1 }]"
        >
          <img
            :src="index === 1 ? item.large : item.small"
            :alt="`图片${item.id}`"
          />
          <div class="data">
            <div class="num">{{ item.value }}</div>
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moduleTitle from '@/components/moduleTitle'

export default {
  name: 'SdssJddsZhgjWebLeftTwo',
  components: {
    moduleTitle
    // barEcharts
  },
  data() {
    return {
      title: '数据表分析',
      items: [
        {
          id: 1,
          name: '全量数据区(个)',
          value: 357,
          small: require('@/assets/newDashboard/01.png'),
          large: require('@/assets/newDashboard/1.png')
        },
        {
          id: 2,
          name: '核心数据区(个)',
          value: 193,
          small: require('@/assets/newDashboard/02.png'),
          large: require('@/assets/newDashboard/2.png')
        },
        {
          id: 3,
          name: '主题数据区(个)',
          value: 23,
          small: require('@/assets/newDashboard/03.png'),
          large: require('@/assets/newDashboard/3.png')
        }
      ],
      activeIndex: 0,
      interval: null
    }
  },
  computed: {
    orderedItems() {
      let left = this.items[(this.activeIndex + 2) % this.items.length]
      let center = this.items[(this.activeIndex + 1) % this.items.length]
      let right = this.items[this.activeIndex]
      return [left, center, right]
    }
  },
  created() {},
  mounted() {
    this.startRotation()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    rotate() {
      // 更新：让轮播方向从左到右
      this.activeIndex =
        (this.activeIndex + 1 + this.items.length) % this.items.length
    },
    startRotation() {
      this.interval = setInterval(this.rotate, 2000) // 启动interval
    },
    pauseRotation() {
      // 新增：暂停轮播
      clearInterval(this.interval)
    }
  }
}
</script>

<style lang="scss" scoped>
.leftTwo {
  width: 100%;
  height: 30%;
  position: relative;
}
.two {
  width: 100%;
  position: absolute;
  top: 58%;
  left: 52%;
  transform: translate(-50%, -50%);
}
.carousel {
  margin-left: 1.3021vw;
  height: 100%;
  // padding-top: 0.7813vw;
  display: flex;
  justify-content: center;
  align-items: center;
  // gap: 0.4167vw;
}

.box {
  transition: transform 0.4s ease;
  transform: scale(0.9); /* 小盒子的缩放比例 */
  position: relative;
}

.box img {
  display: block;
  width: 70%;
  height: 100%;
}

.large {
  transform: scale(1.1); /* 大盒子的缩放比例 */
}

.data {
  position: absolute;
  top: 60%;
  left: 35%;
  transform: translate(-50%, -50%);
  // background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  .num {
    text-align: center;
    font-size: 1.25vw;
    font-family: DIN Alternate;
    font-weight: bold;
    color: #ffffff;
  }
  .title {
    margin-top: 0.2604vw;
    text-align: center;
    font-size: 0.625vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
